<template>
	<a-card class="message-container" title="消息">
		<template #extra>
			<a-button type="text">查看更多>></a-button>
		</template>
		<a-list size="small" :data-source="data">
			<template #renderItem="{ item }">
				<a-list-item class="line">
                    <span class="title">{{ item.title }}</span>
                    <span class="time">{{ item.time }}</span>
                </a-list-item>
			</template>
		</a-list>
	</a-card>
</template>
<script setup>
	import { computed, ref, onMounted, reactive, h } from 'vue';
	const data = [
		{
			title: '梅州梅江警方：疫情不是阻力 追逃从未停歇',
			time: '2023-04-16 12:13:20',
		},
		{
			title: '孟加拉国首都贫民区大火导致200间简易房被毁',
			time: '2023-04-16 12:13:20',
		},
		{
			title: '一个人的音乐会：感恩医护',
			time: '2023-04-16 12:13:20',
		},
		{
			title: '手机市场又崩了！下个季度回暖？',
			time: '2023-04-16 12:13:20',
		},
		{
			title: '信息量非常大！房地产，一个转向要来了？',
			time: '2023-04-16 12:13:20',
		},
		{
			title: '猪油这么香，为什么现在却没人吃了呢？',
			time: '2023-04-16 12:13:20',
		},
		{
			title: '最后一公里的阴影：他们为什么纷纷逃离末端驿站',
			time: '2023-04-16 12:13:20',
		},
		{
			title: '猪油这么香，为什么现在却没人吃了呢？',
			time: '2023-04-16 12:13:20',
		}
	];
</script>
<style lang="less" scoped>
	.message-container {
		width: 100%;
        .line{
            .title{
                font-size: 14px;
                color: #1D2129;
            }
            .time{
                font-size: 12px;
                color: #86909C;
            }
        }
	}
</style>
